/*
1 输入框绑定 值改变事件 input事件
  1.获取到输入框的值
  2.合法性判断
  3.检验通过 把输入框的值 发送到后台
  4.返回的数据渲染到页面
2.防抖  (定时器)      和节流
  0.防抖 一般用于 输入框 防止重复输入 重复发送请求
  0.节流 一般用于 页面下拉 和 上拉
  1.定义全局的定时器id

 */
import { request } from '../../request/index'
Page({
  data: {
     goods:[],  //搜索返回的数据
     isFocus:false, //取消按钮是否显示  fales 默认不隐藏
     inpValue: ""   //输入框的值
  },
  TimeId:-1,  //全局定时器的值

  //输入框的值改变 就会触发的事件
  handleInput(e){
    //1.获取输入框的值
    const { value } = e.detail
    //2.检测输入的值是否合法性 （是否空值）
    if (!value.trim()) {   //取反
      // 当输入框为空值时，清除返回来的数组 和 隐藏取消按钮
      // 先清除定时器,不然按删除太快了最后会触发最后的值的请求
      clearTimeout(this.TimeId);  
      this.setData({
        goods:[],
        isFocus:false
      })
       // 值不合法
       return;
    };
    //3.准备发送请求获取数据 前 把取消按钮显示出来
    this.setData({
      isFocus:true
    })
    //4.给输入框添加防抖功能
    // 一开始输入h先清除定时器但是这里没有还没开定时器不管它，不会报错，
    // 然后开起定时器,1秒之后执行，this.TimeId有真实的1s时间了，
    // 又按了u又先清除上一个h的定时器，又开起一个定时器，
    // 最后松手不输入了 1秒后执行调用接口。
    clearTimeout(this.TimeId);  
    this.TimeId = setTimeout(()=>{
      this.qsearch(value);
    },1000)
  },

  //发送请求获取搜索建议的数据
  async qsearch(query){
    const res = await request({
      url:"/goods/qsearch",
      data:{query}
    })
    console.log(res);
    this.setData({
      goods: res
    })
  },
  //点击 取消按钮
  handleCancel(){
    this.setData({
       inpValue:"",   //输入框的值 清空
       isFocus:false,   //隐藏取消按钮
       goods:[]  //清空数组
      
    })
  }
})